<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            #map {
                width: 800px;
                height: 512px;
                border: 1px solid black;
            }
        </style>
        <script type='text/javascript' src='OpenLayers.js'></script>

        <script type="text/javascript">

            var SinglePoint = OpenLayers.Class.create();
            SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
                createFeature: function(evt) {
                    this.control.layer.removeFeatures(this.control.layer.features);
                    OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
                }
            });

            var start_style = OpenLayers.Util.applyDefaults({
                externalGraphic: "img/marker-green.png",
                graphicWidth: 18,
                graphicHeight: 26,
                graphicYOffset: -26,
                graphicOpacity: 1
            }, OpenLayers.Feature.Vector.style['default']);

            var stop_style = OpenLayers.Util.applyDefaults({
                externalGraphic: "img/marker.png",
                graphicWidth: 18,
                graphicHeight: 26,
                graphicYOffset: -26,
                graphicOpacity: 1
            }, OpenLayers.Feature.Vector.style['default']);

            var result_style = OpenLayers.Util.applyDefaults({
                strokeWidth: 3,
                strokeColor: "#ff0000",
                fillOpacity: 0
            }, OpenLayers.Feature.Vector.style['default']);

            // global variables
            var map, parser, start, stop, downtown,result, controls,wms_base;

            function init() {
                map = new OpenLayers.Map('map', {});
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.MousePosition());

                // create and add layers to the map
                wms_base = new OpenLayers.Layer.WMS(
                'Base Layer',
                'http://localhost:8080/geoserver/ktm/wms',
                {layers: 'urban_roads'}
                );
                //                var satellite = new OpenLayers.Layer.GoogleMercator("Google Satellite",
                //                                                                    {type: G_NORMAL_MAP});
                
                start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
                stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
                downtown = new OpenLayers.Layer.Vector("Downtown data area",{style: result_style});
                result = new OpenLayers.Layer.Vector("Routing results",{style: result_style});
				map.addLayers([wms_base, start, stop, downtown,result]);
                if(!map.getCenter()){
                    map.setCenter(new OpenLayers.LonLat(5.6622505187988,26.523742675782));
                    map.zoomTo(13.5);
                }

				
                // set default position
                //                map.zoomToExtent(new OpenLayers.Bounds(-13737893,6141906,-13728396,6151394));

                // controls
                controls = {
                    start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
                    stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
                }
                for (var key in controls) {
                    map.addControl(controls[key]);
                }
				
                //create a feature from a wkt string and add it to the map
                parser = new OpenLayers.Format.WKT();
//                var wkt = "POLYGON((-13737893 6151394, -13737893 6141906, -13728396 6141906, -13728396 6151394, -13737893 6151394))";
//                var geometry = parser.read(wkt);
//                var feature = new OpenLayers.Feature.Vector(geometry);
//                downtown.addFeatures([feature]);
            }

            function toggleControl(element) {
                for (key in controls) {
                    if (element.value == key && element.checked) {
                        controls[key].activate();
                    } else {
                        controls[key].deactivate();
                    }
                }
            }

            function compute() {
                var startPoint = start.features[0];
                var stopPoint = stop.features[0];
//                alert(startPoint.geometry.x+","+startPoint.geometry.y);
                
                if (startPoint && stopPoint) {
                    var result = {
                        startpoint: startPoint.geometry.x + ' ' + startPoint.geometry.y,
                        finalpoint: stopPoint.geometry.x + ' ' + stopPoint.geometry.y,
                        method: OpenLayers.Util.getElement('method').value,
                        region: "urban_roads",
                        srid: "3857"
                    };
                    OpenLayers.loadURL("shortestpath.htm",
                    OpenLayers.Util.getParameterString(result),
                    null,
                    displayRoute);
                }
            }

            function displayRoute(response) {
                if (response && response.responseXML) {
                    // erase the previous results
                    result.removeFeatures(result.features);

                    // parse the features
//                    var edges = response.responseXML.getElementsByTagName('edge');
//                    var features = [];
//                    for (var i = 0; i < edges.length; i++) {
//                        var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
//                        features.push(g);
//                    }

                }                    result.addFeatures("LINESTRING(5.6648254394531 26.542282104493, 5.6696319580078 26.542110443116)");
            }

        </script>
    </head>
    <body onload="init()">
        <div id="map"></div>

        <ul>
            <li>
                <input type="radio" name="control" id="noneToggle"
                       onclick="toggleControl(this);" checked="checked" />
                <label for="noneToggle">navigate</label>
            </li>
            <li>
                <input type="radio" name="control" value="start" id="startToggle"
                       onclick="toggleControl(this);" />
                <label for="startToggle">set start point</label>
            </li>
            <li>
                <input type="radio" name="control" value="stop" id="stopToggle"
                       onclick="toggleControl(this);" />
                <label for="stopToggle">set stop point</label>
            </li>
        </ul>

        <select id="method">
            <option value="SPD">Shortest Path Dijkstra - undirected (BBox)</option>
            <option value="SPA">Shortest Path A Star - undirected</option>
            <option value="SPS">Shortest Path Shooting Star</option>
        </select>
        <button onclick="compute()">Calculate Route</button>

    </body>
</html>